<script setup lang="ts">
import { reactive } from 'vue'
import {  useRouter } from 'vue-router'
import { userLogin } from '@/api/sys'
import { setToken } from '@/utils/auth'

defineOptions({
  name:"Login"
})

const router = useRouter()

const form = reactive({
  username: 'root',
  password: '3.14',
})

const clickLogin = () => {
  userLogin(form).then((res) => {
    console.log(res)
    setToken(res.token)
    router.push({path:"/home"})
  })
}
</script>

<template>
  <div class="flex min-h-full flex-col justify-center px-6 py-12 lg:px-8">
    <div class="sm:mx-auto sm:w-full sm:max-w-sm">
      <img class="mx-auto h-20 w-auto" src="../../assets/png/mty.png" alt="Your Company" />
      <h2 class="mt-10 text-center text-2xl/9 font-bold tracking-tight text-gray-900">
        login to the miao system
      </h2>
    </div>
    <div class="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
      <el-form label-position="top" :model="form" style="max-width: 600px">
        <el-form-item>
          <div class="w-full flex justify-between">
            <span class="text-sm/6 font-medium text-gray-900">账户</span>
          </div>
          <el-input v-model="form.username" size="large" />
        </el-form-item>
        <el-form-item class="hcy-label">
          <div class="w-full flex justify-between">
            <span class="text-sm/6 font-medium text-gray-900">密码</span>
            <a href="#" class="font-semibold text-indigo-600 hover:text-indigo-500">忘记密码</a>
          </div>
          <el-input v-model="form.password" size="large" type="password" show-password />
        </el-form-item>
      </el-form>
      <div>
        <button
          @click="clickLogin"
          type="submit"
          class="flex w-full justify-center rounded-md bg-indigo-600 px-3 py-1.5 text-sm/6 font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
        >
          Sign in
        </button>
      </div>
    </div>
  </div>
</template>

<style scoped></style>
